<template>
  <common-card title="今日交易用户数" value="22,999">
    <template>
      <div style="height:100%;width:100%" id="today-users-chart"></div>
    </template>
    <template v-slot:footer>
      <span>退货率</span>
      <span class="emphasize">5%</span>
    </template>
  </common-card>
</template>
<script>
import CommonCardMixin from "@/mixins/commonCardMixin";

export default {
  mixins: [CommonCardMixin],
  mounted() {
    const chartDom = document.getElementById("today-users-chart");
    const chart = this.$echarts.init(chartDom);
    chart.setOption({
      series: [
        {
          type: "bar",
          color: ["#3398DB"],
          barWidth: "60%", // 柱的宽度
          legendHoverLink:true,
          data: [
            333,
            234,
            123,
            545,
            123,
            345,
            365,
            336,
            234,
            234,
            156,
            394,
            994,
            234
          ]
        }
      ],
      tooltip: {}, // 点击 bar 有数据提示
      xAxis: {
        type: "category",
        show: false,
        data: [
          "00:00",
          "00:10",
          "00:20",
          "00:30",
          "00:40",
          "00:50",
          "01:00",
          "01:10",
          "01:20",
          "01:30",
          "01:40",
          "01:50",
          "02:00",
          "02:10"
        ]
      },
      yAxis: { show: false },
      grid: { top: 0, bottom: 0, left: 0, right: 0 } // 图形撑满
    });
  }
};
</script>
